<template>
	<!-- 下单弹窗 -->
	<view class="order-popup" v-if="showOrderPopup">
		<!-- 遮罩层 -->
		<view class="mask" @click="closePopup"></view>
		<!-- 弹窗内容 -->
		<view class="popup-content">
			<!-- 弹窗标题 -->
			<view class="popup-header">
				<!-- <text class="title">确认订单</text> -->
				<text class="close-btn" @click="closePopup">×</text>
			</view>

			<!-- 商品信息 -->
			<view class="product-info">
				<image class="product-cover" :src="selectedProduct.url"></image>
				<view class="product-desc">
					<!-- 商品描述 -->
					<view class="row-1">
						<view class="product-name">商品描述商品描述商品描述商品描述商品描述</view>
						<view class="product-price">{{ (selectedProduct.price * quantity).toFixed(2) }}元</view>
					</view>
					<view class="row-2">
						<view style="display: flex;">
							<up-icon name="edit-pen" class="edit-style"></up-icon>
							<view class="product-title">盲盒；{{ selectedProduct.name }}；单体</view>
						</view>
						<view style="display: flex;">
							<up-icon name="edit-pen" class="edit-style"></up-icon>
							<view class="product-count">x {{ quantity }}</view>
						</view>
					</view>
					<view class="row-3">
						<view style="display: flex;">
							<up-icon name="edit-pen" class="edit-style"></up-icon>
							<view class="address-row">
								<view>派送到：</view>
								<image src="/static/icon/address.png" class="address-icon"></image>
								<view class="address-style">{{ address }}</view>
							</view>
						</view>
						<view style="display: flex;">
							<view style="margin: 0 12rpx;">需付款</view>
							<view class="product-price">{{ (selectedProduct.price * quantity).toFixed(2) }}元</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 收货信息 -->
			<!-- <view class="address-section">
				<text class="section-title">收货信息</text>
				<view class="address-detail">
					<text class="consignee">{{ receiver.name }} {{ receiver.phone }}</text>
					<text class="address-text">{{ receiver.address }}</text>
				</view>
			</view> -->

			<!-- 支付方式 -->
			<view class="pay-methods">
				<text class="section-title">选择支付方式</text>
				<radio-group class="method-group" v-model="selectedPayMethod">
					<label class="method-item" v-for="(method, index) in payMethods" :key="index">
						<!-- <radio iconSize :value="method.value" color="#ff8aa5" /> -->
						<view class="radio" @click="selectPayType(method.value)"
							:class="{ 'radio-default': selectedPayMethod === method.value }">
							<view :class="{ 'radio-active': selectedPayMethod === method.value }"></view>
						</view>
						<image class="method-icon" :src="method.icon"></image>
						<text class="method-text">{{ method.text }}</text>
					</label>
				</radio-group>
			</view>

			<!-- 备注信息 -->
			<view class="remark-section">
				<text class="section-title">订单备注</text>
				<input class="remark-input" v-model="orderRemark" placeholder="请输入备注信息"
					placeholder-style="color: #ccc;" />
			</view>

			<!-- 金额信息 -->
			<view class="amount-info">
				<view class="amount-item">
					<text class="label">商品总价</text>
					<text class="value">¥{{ (selectedProduct.price * quantity).toFixed(2) }}</text>
				</view>
				<view class="amount-item">
					<text class="label">运费</text>
					<text class="value">¥0.00</text>
				</view>
				<view class="amount-item total">
					<text class="label">实付款</text>
					<text class="value">¥{{ (selectedProduct.price * quantity).toFixed(2) }}</text>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="popup-footer">
				<button class="submit-btn" @click="submitOrder">
					确认支付 ¥{{ (selectedProduct.price * quantity).toFixed(2) }}
				</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { StyleOption } from '../goodsDetail.vue'; // 导入商品详情页的类型定义

	// 定义数据类型
	interface PayMethod {
		value : string;
		icon : string;
		text : string;
	}

	interface ReceiverInfo {
		name : string;
		phone : string;
		address : string;
	}

	// 接收父组件参数
	const props = defineProps<{
		show : boolean;
		selectedProduct : StyleOption & { price : number };
		quantity : number;
		address : string;
	}>();

	// 暴露事件
	const emit = defineEmits<{
		(e : 'close') : void;
		(e : 'submit', orderInfo : any) : void;
	}>();

	// 状态管理
	const showOrderPopup = computed(() => props.show);
	const quantity = computed(() => props.quantity);
	// const selectedProduct = computed(() => props.selectedProduct);
	const selectedProduct = ref({
		id: 123,
		name: "动物乐园",
		url: '/static/img/fox.jpg',
		price: 69.88,
	})
	// 收货信息
	const receiver = ref<ReceiverInfo>({
		name: '张三',
		phone: '138****6789',
		address: props.address
	});

	// 支付方式
	const payMethods = ref<PayMethod[]>([
		{ value: 'alipay', icon: '/static/icon/alipay.png', text: '支付宝' },
		{ value: 'wechat', icon: '/static/icon/wxpay.png', text: '微信支付' }
	]);
	const selectedPayMethod = ref('wechat');
	function selectPayType(type : string) {
		selectedPayMethod.value = type
	}
	// 订单信息
	const orderRemark = ref('');

	// 方法
	const closePopup = () => {
		emit('close');
	};

	const submitOrder = () => {
		const orderInfo = {
			productId: selectedProduct.value.id,
			productName: selectedProduct.value.name,
			quantity: quantity.value,
			price: selectedProduct.value.price,
			totalAmount: selectedProduct.value.price * quantity.value,
			payMethod: selectedPayMethod.value,
			receiver: receiver.value,
			remark: orderRemark.value
		};

		// 提交订单逻辑
		emit('submit', orderInfo);
		uni.showToast({
			title: '订单提交成功',
			icon: 'success'
		});
		closePopup();
	};
</script>

<style scoped>
	/* 弹窗容器 */
	.order-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	/* 遮罩层 */
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗内容 */
	.popup-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		padding: 16px;
		max-height: 85vh;
		overflow-y: auto;
		box-sizing: border-box;
		animation: slideUp 0.3s ease forwards;
	}

	/* 弹窗动画 */
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* 弹窗头部 */
	.popup-header {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 16px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		position: absolute;
		right: 0;
		font-size: 24px;
		color: #999;
	}

	/* 商品信息 */
	.product-info {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1px solid #f5f5f5;
		margin-bottom: 32rpx;
	}

	.product-cover {
		width: 80px;
		height: 80px;
		border-radius: 8px;
		margin-right: 8px;
	}

	.product-desc {
		flex: 1;
		font-size: 14px;
	}

	.row-1 {
		width: 98%;
		display: flex;
		justify-content: space-between;
	}

	.product-name {
		width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 40rpx;
		line-height: 40rpx;
		color: #333;
		margin-left: 32rpx;
	}

	.product-price {
		color: #000;
		font-size: 13px;
	}

	.row-2 {
		width: 98%;
		display: flex;
		justify-content: space-between;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 12px;
		margin-top: 10rpx;
	}

	.edit-style {
		margin-right: 8rpx;
	}

	.product-title {
		color: #999;
	}

	.row-3 {
		width: 98%;
		display: flex;
		justify-content: space-between;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 12px;
		margin-top: 25rpx;
	}

	.address-row {
		color: #999;
		display: flex;
	}

	.address-icon {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.address-style {
		width: 75rpx;
		height: 40rpx;
		line-height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: 8rpx;
	}

	/* 收货信息 */
	.address-section {
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 14px;
		font-weight: bold;
		color: #333;
		margin-bottom: 12px;
		display: block;
	}

	.address-detail {
		background-color: #f9f9f9;
		padding: 12px;
		border-radius: 8px;
	}

	.consignee {
		font-size: 14px;
		color: #333;
		display: block;
		margin-bottom: 8px;
	}

	.address-text {
		font-size: 13px;
		color: #666;
		line-height: 1.4;
	}

	/* 支付方式 */
	.pay-methods {
		margin-bottom: 16rpx;
	}

	.method-group {
		display: flex;
		flex-direction: column;
	}

	.method-item {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		/* border-bottom: 1px solid #f5f5f5; */
	}

	.method-item:last-child {
		border-bottom: none;
	}

	.radio {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 2rpx solid #cccccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.radio-active {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #DE868F;
	}

	.radio-default {
		border: 2rpx solid #DE868F;
	}

	.method-icon {
		width: 24px;
		height: 24px;
		margin: 0 8rpx;
	}

	.method-text {
		font-size: 14px;
		color: #333;
	}

	/* 备注信息 */
	.remark-section {
		margin-bottom: 16px;
	}

	.remark-input {
		width: 100%;
		height: 80px;
		background-color: #f9f9f9;
		border-radius: 8px;
		padding: 12px;
		font-size: 14px;
		color: #333;
		box-sizing: border-box;
	}

	/* 金额信息 */
	.amount-info {
		background-color: #f9f9f9;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 24px;
	}

	.amount-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;
		font-size: 14px;
	}

	.amount-item:last-child {
		margin-bottom: 0;
	}

	.label {
		color: #666;
	}

	.value {
		color: #333;
	}

	.total {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid #eee;
	}

	.total .label {
		color: #333;
		font-weight: bold;
	}

	.total .value {
		color: #ff8aa5;
		font-weight: bold;
		font-size: 16px;
	}

	/* 底部按钮 */
	.popup-footer {
		position: sticky;
		bottom: 0;
		padding: 16px;
		background-color: #fff;
		margin: 0 -16px;
	}

	.submit-btn {
		width: 100%;
		height: 48px;
		line-height: 48px;
		background-color: #ff8aa5;
		color: #fff;
		font-size: 16px;
		border-radius: 24px;
		border: none;
	}
</style>